<template>
    <a-form ref="formRef" name="custom-validation" :model="formState" :rules="rules" layout="horizontal"
        @finish="handleFinish">
        <a-form-item label="Bvid" name="bvids">
            <a-input v-model:value.trim="formState.bvids" placeholder="多个Bvid使用 , 分隔" autocomplete="off" />
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button type="primary" html-type="submit">提交</a-button>
        </a-form-item>
    </a-form>
</template>

<script setup lang="ts">
import { FormInstance } from 'ant-design-vue';
import { Rule } from 'ant-design-vue/es/form';
import { reactive, ref } from 'vue';
interface FormState {
    bvids: string;
}

const formRef = ref<FormInstance>();
const formState = reactive<FormState>({
    bvids: '',
});

const handleFinish = (values: FormState) => {
    const bvids = values.bvids.split(',');
};

const rules: Record<string, Rule[]> = {
    bvids: [{ required: true, trigger: 'change', message:'请输入Bvid' }],
};


</script>

<style scoped></style>